<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
  </head>

  <body style="padding: 15px">
    <!-- 添加图书的Panel面板 -->
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加新图书</h3>
      </div>
      <div class="panel-body form-inline">
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input
            type="text"
            class="form-control"
            id="iptBookname"
            placeholder="请输入书名"
          />
        </div>

        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input
            type="text"
            class="form-control"
            id="iptAuthor"
            placeholder="请输入作者"
          />
        </div>

        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input
            type="text"
            class="form-control"
            id="iptPublisher"
            placeholder="请输入出版社"
          />
        </div>

        <button id="btnAdd" class="btn btn-primary" onclick="addBook()">
          添加
        </button>
      </div>
    </div>

    <!-- 图书的表格 -->
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tb"></tbody>
    </table>

    <script>
      // 获取图书列表
      const baseURL = "http://www.liulongbin.top:3006"
      function getBookList() {
        // 通过get获取数据
        $.get(`${baseURL}/api/getbooks`, ({ data }) => {
          // 遍历循环
          // $("#tb").html("<tr><td>1</td>2<td></td><td>3</td><td>4</td></tr>")
          // $("#tb").html(["1", "2", "3"])
          $("#tb").html(
            data.map(
              (item) => `
           <tr>
             <td>${item.id}</td>
             <td>${item.bookname}</td>
             <td>${item.author}</td>
             <td>${item.publisher}</td>
             <td><a onclick="delBook(${item.id})">删除</a></td>
           </tr>
          `
            )
          )
        })
      }
      // 新增图书时 调用新增接口 - 检查一下字段填没填
      function addBook() {
        const bookname = $("#iptBookname").val().trim()
        const author = $("#iptAuthor").val().trim()
        const publisher = $("#iptPublisher").val().trim()
        if (bookname && author && publisher) {
          $.post(
            `${baseURL}/api/addBook`,
            { bookname, author, publisher },
            ({ status, msg }) => {
              if (status === 201) {
                // 服务器新增成功了
                $("#iptBookname").val("")
                $("#iptAuthor").val("")
                $("#iptPublisher").val("")
                getBookList() // 重新拉取数据
              } else {
                alert(msg) // 提示错误信息
              }
            }
          )
        } else {
          alert("图书名称-作者-出版社都为必填项")
        }
      }
      function delBook(id) {
        //  询问一下 是否要删除
        // confirm有阻塞作用
        if (confirm("你真的真的真的要删除该图书吗?")) {
          // 调用删除接口
          $.ajax({
            type: "delete",
            url: `${baseURL}/api/delbook?id=${id}`,
            //   data: { id }, delete类型 这里指的是请求体参数 和get不一样 get做了查询参数
            success({ status, msg }) {
              if (status === 200) {
                getBookList()
              } else {
                alert(msg)
              }
            },
          })
        }
      }
      getBookList()
      // $(function () {
      //   // 获取图书列表数据
      //   function getBookList() {
      //     $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
      //       if (res.status !== 200) return alert('获取数据失败！')

      //       var rows = []
      //       $.each(res.data, function (i, item) {
      //         rows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' + item.author + '</td><td>' + item.publisher + '</td><td><a href="javascript:;" class="del" data-id="' + item.id + '">删除</a></td></tr>')
      //       })
      //       $('#tb').empty().append(rows.join(''))
      //     })
      //   }

      //   getBookList()

      //   /* $('.del').on('click', function () {
      //     console.log('ok')
      //   }) */

      //   // 通过代理的方式为动态添加的元素绑定点击事件
      //   $('tbody').on('click', '.del', function () {
      //     var id = $(this).attr('data-id')
      //     $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
      //       if (res.status !== 200) return alert('删除图书失败！')
      //       getBookList()
      //     })
      //   })

      //   $('#btnAdd').on('click', function () {
      //     var bookname = $('#iptBookname').val().trim()
      //     var author = $('#iptAuthor').val().trim()
      //     var publisher = $('#iptPublisher').val().trim()
      //     if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
      //       return alert('请填写完整的图书信息！')
      //     }

      //     $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: bookname, author: author, publisher: publisher }, function (res) {
      //       if (res.status !== 201) return alert('添加图书失败！')
      //       getBookList()
      //       $('#iptBookname').val('')
      //       $('#iptAuthor').val('')
      //       $('#iptPublisher').val('')
      //     })
      //   })
      // })
    </script>
  </body>
</html>
